import Vue from 'vue'
import SvgIcon from '@/components/SvgIcon'// svg component

// register globally
Vue.component('svg-icon', SvgIcon)

// require.context 创建一个导入上下文(上下文文件夹, 是否检索子文件夹, 匹配的文件的正则)
// 返回一个新的导入函数，这个函数的上下文作用域仅在指定的文件夹内
// 作用：自动扫描该文件夹内匹配规则的文件，然后可以进行一次性导入，不用一个个手动导入
const req = require.context('./svg', false, /\.svg$/)

// 导入上下文文件夹中匹配的svg图片
// req('./eye.svg')

const requireAll = requireContext => requireContext.keys().map(requireContext)

// #region const requireAll = requireContext => requireContext.keys().map(requireContext) 拆解
// const requireAll = requireContext => {
//   const svgPathArr = requireContext.keys()
//   const svgArr = svgPathArr.map((svgPath) => {
//     // 导入图片
//     return requireContext(svgPath)
//   })
//   return svgArr
// }
// #endregion

requireAll(req)

// 明确的点：
// 1. requireContext 就是 req
// 2. req 是一个函数，函数也是对象，所以也可以有键值对
// 3. requireContext.keys() 得到的是 所有匹配的文件路径（相对于上下文文件夹【./svg】）组成的数组
// 4. requireContext.keys() 返回值就是一个数组

// #region 数组的 map 方法实现：
// // eslint-disable-next-line no-extend-native
// Array.prototype.myMap = function(cb) {
//   const newArr = []

//   // 原型对象上的 this 指向 调用该方法的实例对象 => arr
//   for (let i = 0; i < this.length; i++) {
//     // 没循环一次，拿到对应下标的值，作为第一个实参，调用回调函数
//     const v = this[i]
//     const returnValue = cb(v)
//     newArr.push(returnValue)
//   }

//   return newArr
// }

// const arr = [1, 2, 3]

// const fn = (v) => {
//   return v * 2
// }

// const arr2 = arr.myMap(fn)
// // // 下面的写法，逻辑 和 上面的一行代码 一摸一样
// // const arr2 = arr.myMap((v) => {
// //   return fn(v)
// // })
// #endregion

